<template>
	<!-- 任务管理 -->
	<div class="taskExecuteManage">
		<!-- 头部 -->
		<div class="classTop">
			<div class="classTop_l">
				<CommonTitle titleName="当前任务量"> </CommonTitle>
				<div class="itemBox itemBox1">
					<div class="item">
						<div class="icon">
							<svg-icon icon-class="project-detail-icon-2" class="icon" />
						</div>
						<div class="parBox">
							<div class="parnum">{{ state.board.pendingTaskNum }}</div>
							<div class="parname">待配置</div>
						</div>
					</div>
					<div class="item">
						<div class="icon">
							<svg-icon icon-class="project-detail-icon-4" class="icon" />
						</div>
						<div class="parBox">
							<div class="parnum">{{ state.board.waitTaskNum }}</div>
							<div class="parname">未开始</div>
						</div>
					</div>
					<div class="item">
						<div class="icon">
							<svg-icon icon-class="project-detail-icon-7" class="icon" />
						</div>
						<div class="parBox">
							<div class="parnum">{{ state.board.progressTaskNum }}</div>
							<div class="parname">进行中</div>
						</div>
					</div>
					<div class="item">
						<div class="icon">
							<svg-icon icon-class="project-detail-icon-1" class="icon" />
						</div>
						<div class="parBox">
							<div class="parnum">{{ state.board.completedTaskNum }}</div>
							<div class="parname">已完成</div>
						</div>
					</div>
				</div>
			</div>
			<div class="classTop_r">
				<CommonTitle titleName="协同审批情况"> </CommonTitle>
				<div class="itemBox">
					<div class="item" @click="toPath('待审批')">
						<div class="icon">
							<svg-icon icon-class="project-detail-icon-l-02" class="icon" />
						</div>
						<div class="parBox">
							<div class="parnum">{{ state.board.waitApprovalNum }}</div>
							<div class="parname">待审批</div>
						</div>
					</div>
					<div class="item" @click="toPath('被驳回')">
						<div class="icon">
							<svg-icon icon-class="project-detail-icon-l-01" class="icon" />
						</div>
						<div class="parBox">
							<div class="parnum">{{ state.board.rejectApprovalNum }}</div>
							<div class="parname">被驳回</div>
						</div>
					</div>

					<div class="itemBtn">
						<el-button @click="toPath('各项目类别流量配置管理')" class="button_edit">各项目类别流量配置管理</el-button>
					</div>
					<div class="itemBtn">
						<el-button @click="toPath('流程节点管理')" class="button_edit">流程节点管理</el-button>
					</div>
					<div class="itemBtn">
						<el-button @click="toPath('执行成果管理')" class="button_edit">执行成果管理</el-button>
					</div>
				</div>
			</div>
		</div>

		<!-- 表单 -->
		<div class="formBox">
			<el-form :inline="true" :model="taskForm" class="demo-form-inline">
				<el-form-item class="formBox_top_input" label="搜索">
					<el-input
						v-model="taskForm.keywords"
						placeholder="根据招标项目任务名称或编号搜索"
						maxlength="32"
					/>
				</el-form-item>
				<el-form-item label="任务来源部门">
					<el-select v-model="taskForm.deptId" placeholder="">
						<el-option label="全部" value="" />
						<el-option
							v-for="v in state.deptList"
							:key="v.deptId"
							:label="v.deptName"
							:value="v.deptId"
						/>
					</el-select>
				</el-form-item>
				<el-form-item label="项目状态">
					<el-select v-model="taskForm.taskStatus" placeholder="">
						<el-option label="全部" value="" />
						<el-option
							v-for="v in taskStatusOptions"
							:key="v.value"
							:label="v.label"
							:value="v.value"
						/>
					</el-select>
				</el-form-item>
				<el-form-item label="招标项目类别">
					<el-select v-model="taskForm.projectTypeExplain" placeholder="">
						<el-option label="全部" value="" />
						<el-option
							v-for="v in state.tenderType"
							:key="v.projectTypeId"
							:label="v.typeName"
							:value="v.projectTypeId"
						/>
					</el-select>
				</el-form-item>
				<el-form-item label="招标（比选方式）">
					<el-select v-model="taskForm.tenderTypeExplain" placeholder="">
						<el-option
							v-for="v in competitiveBiddingStatusOptions"
							:key="v.value"
							:label="v.label"
							:value="v.value"
						/>
					</el-select>
				</el-form-item>
				<div class="el_classbtn">
					<el-button
						color="#FF7B50"
						style="color: #fff"
						type="primary"
						@click="onQuery"
						>搜索</el-button
					>
					<el-button class="m-l10" style="" color="#F0F0F0" @click="onReset"
						>重置</el-button
					>
				</div>
				<div class="radio_">
					<div class="search-right-wrap">
						<div
							class="screen-button d-flex a-center j-center"
							:style="{
								'--screen-button-border-color':
									taskForm.isHideComplete == '1' ? '#fc7037' : '#CCCCCC',
							}"
						>
							<el-radio
								v-model="taskForm.isHideComplete"
								label="1"
								@click.prevent="radioChange(taskForm.isHideComplete)"
								>隐藏已完结项目</el-radio
							>
						</div>
					</div>
				</div>
			</el-form>
		</div>

		<public-table
			index
			:page="page"
			:tableData="state.tableData.content"
			:tableOption.sync="tableOption"
			@page-change="onPageChange"
		>
			<template #operation="scope">
				<!-- <span
              style="cursor: pointer;color: #fc7037"
              @click="toPath(scope.row)"
          >{{scope.row.operation}}</span> -->
				<el-button
					style=""
					color="#F0F0F0"
					size="small"
					@click="toPath('edit', scope.row)"
					>配置计划</el-button
				>
				<el-button
					color="#FF7B50"
					size="small"
					style="color: #fff"
					@click="toPath('view', scope.row)"
					type="primary"
					>查看</el-button
				>
			</template>
			<template #taskStatus="scope">
				<span v-for="v in taskStatusOptions" :key="v.value">
					<span v-if="v.value == scope.row.taskStatus">{{ v.label }}</span>
				</span>
			</template>
			<template #projectTypeExplain="scope">
				<span v-for="v in state.tenderType" :key="v.projectTypeId">
					<span v-if="v.projectTypeId == scope.row.projectTypeExplain">{{
						v.typeName
					}}</span>
				</span>
			</template>
			<template #tenderTypeExplain="scope">
				<span v-for="v in competitiveBiddingStatusOptions" :key="v.value">
					<span v-if="v.value == scope.row.tenderTypeExplain">{{
						v.label
					}}</span>
				</span>
			</template>
		</public-table>
	</div>
</template>

<script setup>
import CommonTitle from "@/components/CommonTitle.vue";
import PublicTable from "@/components/PublicTable";
import { ref, reactive, watch, onMounted } from "vue";
import {
	ElInput,
	ElSelect,
	ElOption,
	ElDivider,
	ElRadio,
	ElForm, ElMessage, ElMessageBox,
} from "element-plus";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { processApi } from "@/api/biddingProject";
import {
	nodeStatusOptions,
	competitiveBiddingStatusOptions,
	taskStatusOptions,
} from "@/common/dict/dictCollect";

const store = useStore();
const router = useRouter();

const taskForm = reactive({
	keywords: "",
	taskStatus: "",
	projectTypeExplain: "",
	tenderTypeExplain: "",
	deptId: "",
	deptName: "",
	isHideComplete: "1",
});

const page = reactive({
	total: 0,
	current: 1,
	size: 50,
});

const tableOption = ref([
	{ label: "任务执行状态", prop: "taskStatus", slot: true, width: 120 },
	{ label: "所属项目 ", prop: "projectName" },
	{ label: "招标项目任务 ", prop: "taskName", width: 120 },
	{ label: "任务编号 ", prop: "tenderTaskId" },
	{ label: "任务来源部门 ", prop: "deptName", width: 120 },
	{ label: "招标项目类别 ", prop: "projectTypeExplain", slot: true, width: 120 },
	{ label: "招标（比选）方式 ", prop: "tenderTypeExplain", slot: true, width: 150 },
	{
		label: "控制价",
		prop: "tenderAmount",
		formatter: (val) => {
			if(!val){
				return '-';
			}
			return val + " 元";
		},
	},
	{
		label: "任务量",
		prop: "totalFlowNum",
		formatter: (val, row) => {
			return row.completeFlowNum + "/" + row.totalFlowNum;
		},
	},
	{ label: "当前节点 ", prop: "currentFlowNodeName" },
	{ label: "任务创建日期 ", prop: "createTime", width: 120 },
	{ label: "实际完成日期", prop: "realEndTime", width: 120 },
	{ label: "操作", prop: "operation", slot: true, width: 200 },
]);

const tableData = ref([
	{
		operation: "111",
	},
]);
const state = reactive({
	tableData: [],
	board: {},
	deptList: store.state.common.deptList,
	tenderType: store.state.common.tenderType,
});

const radioChange = (e) => {
	if (e === "1") {
		taskForm.isHideComplete = "";
	} else {
		taskForm.isHideComplete = "1";
	}
	getPageList();
};

// 根据搜索条件查询
const onQuery = () => {
	getPageList();
};

// 重置
const onReset = () => {
	for (let key in taskForm) {
		if (typeof taskForm[key] === "string") {
			taskForm[key] = "";
		}
		if (typeof taskForm[key] === "number") {
			taskForm[key] = 0;
		}
	}
	taskForm.isHideComplete = "1";
	page.current = 1;
	page.size = 50;
	getPageList();
};
const getBoard = () => {
	processApi.getBoard().then((res) => {
		if (res.code == 200) {
			state.board = res.data;
		}
	});
};
const getPageList = () => {
	processApi
		.getPageList({
			pageNum: page.current,
			pageSize: page.size,
			param: {
				...taskForm,
			},
		})
		.then((res) => {
			if (res.code == 200) {
				state.tableData = res.data;
				page.total = res.data.totalSize;
			}
		});
};

const getTypeList = () => {
	if (store.state.common.tenderType.length === 0) {
		processApi.getTypeList().then((res) => {
			if (res.code == 200) {
				state.tenderType = res.data;
				store.commit("set_tenderType", res.data);
			}
		});
	} else {
		state.tenderType = store.state.common.tenderType;
	}
};
const getDeptList = () => {
	if (store.state.common.deptList.length === 0) {
		processApi.getDeptList().then((res) => {
			if (res.code == 200) {
				state.deptList = res.data;
				store.commit("set_deptList", res.data);
			}
		});
	} else {
		state.deptList = store.state.common.deptList;
	}
};

const onPageChange = (e) => {
	page.current = e.page;
	page.size = e.limit;
	let param = {
		param: {
			queryName: "",
		},
		pageNum: page.current,
		pageSize: page.size,
	};
	getPageList();
};

// 跳转 任务配置

const toPath = (key, row) => {
	// console.log(state.tenderType);
	switch (key) {
		case "edit":
			if(!row.projectTypeExplain){
				ElMessageBox.alert('前置任务未完成,请先完成前置任务!', '警告', {
					confirmButtonText: '确认',
					callback: (action) => {},
				});
				return;
			}
			router.push({
				path: `/tender/taskManage/taskConfigurationPlan/tenderTaskId=${row.tenderTaskId}&tenderType=${row.tenderTypeExplain}&projectTypeExplain=${row.projectTypeExplain}&tenderTypeExplain=${row.tenderTypeExplain}`,
			});
			break;
		case "view":
			router.push({
				path:
					"/tender/taskManage/taskExecuteManageDetail/tenderTaskId=" +
					row.tenderTaskId,
			});
			break;
		case "执行成果管理":
			router.push("/tender/taskManage/executionResult");
			break;
		case "流程节点管理":
			router.push("/tender/taskManage/processNodeManagement");
			break;
		case "各项目类别流量配置管理":
			router.push("/tender/taskManage/processSetup");
			break;
		case "待审批":
			router.push({
				path: "/tender/collaborativeApprovalManagement/index/statusType=1",
			});
			break;
		case "被驳回":
			router.push({
				path: "/tender/collaborativeApprovalManagement/index/statusType=3",
			});
			break;

		default:
			break;
	}
};

onMounted(() => {
	getPageList();
	getBoard();
	getTypeList();
	getDeptList();
});
</script>

<style lang="scss" scoped>
.el-form-item{
	width: auto !important;
}
.taskExecuteManage {
	.classTop {
		display: flex;

		.classTop_l {
			width: 45%;
		}

		.itemBox {
			display: flex;
			justify-content: space-between;
			cursor: pointer;
		}

		.itemBox1 {
			display: flex;
			justify-content: space-between;
			padding-right: 10%;
		}

		.item {
			width: 0.7813rem;
			height: 0.3125rem;
			padding: 0.0833rem;
			display: flex;
			border-radius: 0.026rem;
			box-shadow: 0 0.0104rem 0.0625rem 0 rgba(0, 0, 0, 0.1);
			margin-right: 0.1042rem;

			.icon {
				width: 0.125rem;
				height: 0.125rem;
			}

			.parBox {
				margin-left: 0.0521rem;

				.parnum {
					font-size: 0.0729rem;

					font-weight: 500;
					color: #1a1a1a;
					line-height: 0.0833rem;
				}

				.parname {
					font-size: 0.0625rem;

					font-weight: 400;
					color: #999999;
					line-height: 0.0833rem;
				}
			}
		}

		.classTop_r {
			width: 55%;

			.itemBtn {
				padding: 0rem 0.0521rem;
				margin-top: 0.0313rem;
			}
		}
	}

	.formBox {
		margin-top: 0.1875rem;
		// margin-bottom: 0.1458rem;
		.el-form {
			.el-form-item {
				margin-bottom: 0.0521rem;
				:deep(.el-input) {
					width: 1.3021rem;
				}
				:deep(.el-select .el-input) {
					width: 0.7292rem;
				}
			}
			.formBox_top_input {
				:deep(.el-form-item__content) {
					width: 200px;
				}
			}

			.assetInputBtn {
				&:hover {
					background-color: #fff;
					color: $btn-defualt-tx-color;
				}

				.addAssetBtnImg {
					width: 0.0938rem;
					height: 0.0938rem;
				}
			}
		}

		.searchDivider {
			height: 0.2083rem;
			margin: 0 0.1563rem;
		}
	}
}

.el_classbtn {
	float: right;
}

.radio_ {
	display: flex;
	justify-content: right;
	margin: 0.1042rem 0 0 0;
}
.search-right-wrap {
	.screen-button {
		width: 0.7813rem;
		height: 0.2083rem;
		border-radius: 0.1042rem;
		border: 0.0052rem solid var(--screen-button-border-color);
	}
}
</style>
